﻿@page "/column"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Column
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    The RadzenColumn component is used within a <RadzenLink Text="RadzenRow" Path="/row" /> to create a structured grid layout. Without the <code>RadzenRow</code> component, the <code>RadzenColumn</code> would not be rendered correctly.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase a 12-column based responsive grid system with auto-layout column sizing, explicit column sizes (1-12), responsive sizing with breakpoint properties (<code>SizeXS/SM/MD/LG/XL/XX</code>), column wrapping with <code>RowGap</code>, offset positioning, responsive offsetting, visual column ordering with <code>Order</code> property, responsive ordering, nested layouts, and customizable gutters via the parent <code>RadzenRow</code>'s <code>Gap</code> property.
</RadzenText>

<RadzenRow class="rz-text-align-center rz-border-info-light" Gap="1rem">
    <RadzenColumn class="rz-background-color-danger-lighter rz-color-on-danger-lighter rz-py-5">1</RadzenColumn>
    <RadzenColumn class="rz-background-color-danger-lighter rz-color-on-danger-lighter rz-py-5">2</RadzenColumn>
    <RadzenColumn class="rz-background-color-danger-lighter rz-color-on-danger-lighter rz-py-5">3</RadzenColumn>
    <RadzenColumn class="rz-background-color-danger-lighter rz-color-on-danger-lighter rz-py-5">4</RadzenColumn>
    <RadzenColumn class="rz-background-color-danger-lighter rz-color-on-danger-lighter rz-py-5">5</RadzenColumn>
    <RadzenColumn class="rz-background-color-danger-lighter rz-color-on-danger-lighter rz-py-5">6</RadzenColumn>
    <RadzenColumn class="rz-background-color-danger-lighter rz-color-on-danger-lighter rz-py-5">7</RadzenColumn>
    <RadzenColumn class="rz-background-color-danger-lighter rz-color-on-danger-lighter rz-py-5">8</RadzenColumn>
    <RadzenColumn class="rz-background-color-danger-lighter rz-color-on-danger-lighter rz-py-5">9</RadzenColumn>
    <RadzenColumn class="rz-background-color-danger-lighter rz-color-on-danger-lighter rz-py-5">10</RadzenColumn>
    <RadzenColumn class="rz-background-color-danger-lighter rz-color-on-danger-lighter rz-py-5">11</RadzenColumn>
    <RadzenColumn class="rz-background-color-danger-lighter rz-color-on-danger-lighter rz-py-5">12</RadzenColumn>
</RadzenRow>

<RadzenText Anchor="column#auto-layout-columns" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Auto-layout columns
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    If column <code>Size</code> is not specified, the column width is automatically calculated with respect to the remaining free space available.  
</RadzenText>
<RadzenExample ComponentName="Column" Example="ColumnAutoLayout">
    <ColumnAutoLayout />
</RadzenExample>

<RadzenText Anchor="column#column-sizes" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Column sizes
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    When setting column <code>Size</code>, make sure that the total sum of all column sizes is not greater than 12. Otherwise, columns might wrap to a second row.
</RadzenText>
<RadzenExample ComponentName="Column" Example="ColumnSizes">
    <ColumnSizes />
</RadzenExample>

<RadzenText Anchor="column#responsive-column-sizes" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Responsive column sizes
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Resize your browser window to see how the column adapts to the predefined breakpoint sizes. See <RadzenLink Text="Breakpoints" Path="/breakpoints" /> to learn more.
</RadzenText>
<RadzenExample ComponentName="Column" Example="ColumnResponsiveSizes">
    <ColumnResponsiveSizes />
</RadzenExample>

<RadzenText Anchor="column#column-wrapping" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Column wrapping
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    4 RadzenColumns with Size="6" render on two lines in a RadzenRow. Use <code>RowGap</code> property to specify the vertical spacing between columns on two or more lines in a row.
</RadzenText>
<RadzenExample ComponentName="Column" Example="ColumnWrapping">
    <ColumnWrapping />
</RadzenExample>

<RadzenText Anchor="column#column-offset" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Column offset
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The <code>Offset</code> property moves the column to the right following the grid column layout. E.g. <code>Offset="3"</code> offsets 3 columns to the right.
</RadzenText>
<RadzenExample ComponentName="Column" Example="ColumnOffset">
    <ColumnOffset />
</RadzenExample>

<RadzenText Anchor="column#column-responsive-offset" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Responsive offsetting
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Resize your browser window to see how the column adapts to the predefined breakpoint sizes. See <RadzenLink Text="Breakpoints" Path="/breakpoints" /> to learn more.
</RadzenText>
<RadzenExample ComponentName="Column" Example="ColumnResponsiveOffset">
    <ColumnResponsiveOffset />
</RadzenExample>

<RadzenText Anchor="column#column-order" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Column order
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The <code>Order</code> property is used to reorder columns visually.
</RadzenText>
<RadzenExample ComponentName="Column" Example="ColumnOrder">
    <ColumnOrder />
</RadzenExample>

<RadzenText Anchor="column#column-responsive-order" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Responsive column ordering
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    You can reorder columns on different screen sizes. Resize your browser window to see how the columns reorder. See <RadzenLink Text="Breakpoints" Path="/breakpoints" /> to learn more.
</RadzenText>
<RadzenExample ComponentName="Column" Example="ColumnResponsiveOrder">
    <ColumnResponsiveOrder />
</RadzenExample>

<RadzenText Anchor="column#nested-layouts" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Nested Layouts
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    You can reorder columns on different screen sizes. Resize your browser window to see how the columns reorder. See <RadzenLink Text="Breakpoints" Path="/breakpoints" /> to learn more.
</RadzenText>
<RadzenExample ComponentName="Column" Example="ColumnNestedLayouts">
    <ColumnNestedLayouts />
</RadzenExample>

<RadzenText Anchor="column#gutters" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Gutters
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    By default, the spacing between columns is set to <code>1rem</code>, via the <code>--rz-gap</code> CSS variable. Spacing between coulmns can be controlled by setting the <code>Gap</code> property of the parent <code>RadzenRow</code> component.
</RadzenText>
<RadzenExample ComponentName="Column" Example="ColumnGutters">
    <ColumnGutters />
</RadzenExample>
